<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 400px;
            height: 300px;
            position: relative;
        }
    </style>
</head>
<body>
<input type="button"value="隐藏">
<input type="button"value="显示">
<input type="button"value="淡出">
<input type="button"value="淡入">
<input type="button"value="上滑">
<input type="button"value="下滑">
<input type="button"value="自定义">
<hr>
<img src="sky.jpeg" alt="">
<script src="../js/jquery-1.4.2.js"></script>
<script>
    $('input:eq(0)').click(function () {
        //给图片添加隐藏动画 参数1:动画持续时间 参数2:动画结束回调方法
        $('img').hide(2000,function () {
            alert('隐藏动画')
        })
    })
    $('input:eq(1)').click(function () {
        //给图片添加显示动画 参数1:动画持续时间 参数2:动画结束回调方法
        $('img').show(2000,function () {
            alert('显示动画')
        })
    })
    $('input:eq(2)').click(function () {
        //给图片添加淡出动画 参数1:动画持续时间 参数2:动画结束回调方法
        $('img').fadeOut(2000,function () {
            alert('淡出动画')
        })
    })
    $('input:eq(3)').click(function () {
        //给图片添加淡入动画 参数1:动画持续时间 参数2:动画结束回调方法
        $('img').fadeIn(2000,function () {
            alert('淡入动画')
        })
    })
    $('input:eq(4)').click(function () {
        //给图片添加上滑动画 参数1:动画持续时间 参数2:动画结束回调方法
        $('img').slideUp(2000,function () {
            alert('上滑动画')
        })
    })
    $('input:eq(5)').click(function () {
        //给图片添加下滑动画 参数1:动画持续时间 参数2:动画结束回调方法
        $('img').slideDown(2000,function () {
            alert('下滑动画')
        })
    })
    $('input:eq(6)').click(function () {
        $('img').animate({'left':'200px'},1000)
        .animate({'top':'200px'},1000)
        .animate({'left':'0px'},1000)
        .animate({'top':'0px'},1000)
        .animate({'width':'800px','height':'600px'},1000)
        .animate({'width':'400px','height':'300px'},1000)
    })
</script>
</body>
</html>